<template>
  <div class="wrapper">
      <div class="content">
        <div class="panel">
          <img class="info-avatar" src='@/static/images/seak.webp' />
          <div class="introduce">
            <div class="desc">张先生，男，24岁，2024年2月13日持续发热</div>
          </div>
        </div>
        <div class="panel doctor">
          <div class="introduce">
            <div class="desc">您好，请问您身体哪里不舒服？</div>
          </div>
          <img class="info-avatar" src='@/static/images/infoAvatar.png'/>
        </div>
        <div class="panel">
          <img class="info-avatar" src='@/static/images/seak.webp' />
          <div class="introduce">
            <div class="desc">头疼发热一直不好</div>
          </div>
        </div>
        <div class="panel doctor">
          <div class="introduce">
            <div class="desc">
              <img class="docicon"  src='@/static/images/doc-icon.png' />
              <div class="seek">
                <div>张先生，男，24岁</div> 
                <div>头疼发热头疼发热头疼发热...</div>
              </div>
            </div>
            <div class="look">查看档案</div>
          </div>
          <img class="info-avatar" src='@/static/images/infoAvatar.png'  />
        </div>
        <div class="theEnd">结束问诊，整理笔记</div>
        <div class="bottomInput">
          <img class="bottonicon"  src='@/static/images/horn.png'/>
          <Input type='text' placeholder='请输入' class="chat-input"/>
          <img class="bottonicon" src='@/static/images/upload.png'/>
        </div>
      </div>
    </div>
</template>

<script>
	import request from '../../utils/request'

export default {
  components:{
  },
  data() {
    return {
      multiArray:['男', '女']
    }
  },
  async onLoad() {

  },
  methods: {
    async getAnchorlist(){
      const resData = await request('api/anchor/anchorlist', 'post', {cate_id:this.cate_id});
      this.anchorListData = resData.data
    },
   toPage(url){
      uni.navigateTo({
        url: url
      });
   }
  }
}
</script>

<style lang="scss" scoped>

.wrapper {
  display       : flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 15upx;
  padding-bottom: 50upx;
  .info-title  {
    font-size: 32upx;
    color: hsl(0, 0%, 0%);
    position: relative;
    padding-left: 20upx;
    &::before{
      content: '';
      position: absolute;
      width: 8upx;
      height: 30upx;
      background-color: #0094FF;
      border-radius: 4upx;
      left: 0;
      top: 8upx;
    }
  }
  .seakInfo {
    background: #F0F9FF;
    border-radius: 20upx 20upx 20upx 20upx;
    border: 1upx solid #66C2FF;
    margin: 20upx 40upx;
    padding: 30upx 20upx;
    font-size: 28upx;
    .seak-txt {
      margin-top: 20upx;
    }
  }
  .content {
    background: #FFFFFF;
    box-shadow: 0upx -8upx 40upx 0upx rgba(0,73,126,0.1);
    border-radius: 60upx 60upx 0upx 0upx;
    padding: 30upx 40upx;
    margin-top: 10upx;
    height: 100vh;
    
    .info-avatar {
      display: block;
      width  : 80upx;
      height : 80upx;
      border-radius: 50%;
    }
    .panel {
      position: relative;
      padding: 30upx 0;
      font-size: 30upx;
      display: flex;
      .introduce {
        width: 446upx;
        background: #F6F6F6;
        padding: 14upx 20upx;
        border-radius: 0upx 20upx 20upx 20upx;
        border: 3upx solid #E9E9E9;
        margin-left: 20upx;
      }
      .desc {
        font-size: 28upx;
        margin-top: 10upx;
      }
  
    }
    .doctor {
      justify-content: flex-end;
      .introduce {
        border-radius: 20upx 0 20upx 20upx;
        margin-right: 20upx;
        border-color: #66C2FF;
        background: #F0F9FF;
        width: auto;
        .desc {
          display: flex;
          align-items:flex-start
        }
        .seek {
          width: 400upx;
          margin-left: 13upx;
        }
        .docicon {
          width: 42upx;
          height: 42upx;
        }
        .look {
          width: 150upx;
          height: 50upx;
          background: #0094FF;
          border-radius: 100upx;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 17upx auto;
          font-size: 26upx;
        }
        
      }
    }
    .theEnd {
      margin-top: 40upx;
      width: 482upx;
      height: 60upx;
      background: #DAF0FF;
      border-radius: 100upx 100upx 100upx 100upx;
      color: #0094FF;
      font-size: 30upx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin:60upx auto;
    }
  }
  .bottomInput {
    position: fixed;
    bottom: 24upx;
    left: 0;
    right: 0;
    padding: 0 20upx;
    height: 100upx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .chat-input {
      width: 490upx;
      height: 80upx;
      background: #F0F9FF;
      border-radius: 60upx 60upx 60upx 60upx;
      border: 3upx solid #0094FF;
      padding: 0 20upx;
    }
    .bottonicon {
      width: 70upx;
      height: 70upx;
    }
  }
}


</style>
